{% include 'header.html' %}

  <title>Wox Status: {{dj_title}}</title>
  {% load socketio_tags %}
  {% socketio %}
  <script type="text/javascript"> 
    function showLoading(obj) {
        if (obj) {
            var nextobj = obj.next('.field-indic');
            if (nextobj)
                nextobj.attr('class', 'field-indic loading-indicator');
        }
    }

    function endLoading(obj) {
        if (obj) {
            var nextobj = obj.next('.field-indic');
            if (nextobj)
                nextobj.attr('class', 'field-indic');
        }
    }


    function showlink(html) {
        return html.replace(/(\w+[\w\s]*):\s*(http:\/\/\S+)/g, '<a href="$2" target="_blank">$1</a>');
    }

    /* global variables for status tracking */

    var logsizes= {};
    var logstatus = {};
    // to make sure just sync once
    var firstsync_flag = true;

    function getlen(jsonobj) {
        var l = 0;
        for (i in jsonobj)
            l++;
        return l;
    }

    function magic() {
        // will be instanced in start()
        var socket;
    
        var connected = function() {
            // use log id as channel name
            for (lid in logstatus) {
                socket.subscribe(lid);
            }

            // just sync once
            if (firstsync_flag && getlen(logstatus)) {
                firstsync_flag = false;
                socket.send({channels: logstatus});
            }
        };
    
        var disconnected = function() {
            // reconnect after 1s
            setTimeout(start, 1000);
        };
    
        var messaged = function(data_array) {
          $.each(data_array, function(i, data) {
            var c = data.channel;

            if (! (c in logstatus)) {
               // continue
               return;
            }

            var s = data.status;
            // new log size
            var sz = data.log.length;
            // previous log size
            var psz = logsizes[c];

            if (logstatus[c] != s) {
                logstatus[c] = s;
                switch (s) {
                    case 'error':
                    case 'unreachable':
                       // don't unsubscribe, because the install/test
                        // might get restarted when the problem is fixed
                        logsizes[c] = 0;
                        break;
                    case 'ready':
                    case 'finished':
                    case 'terminated':
                    case 'timeout':
                    case 'cancelled':
                        socket.unsubscribe(c);
                        delete logstatus[c];
                        break;
                }

                // resetting title bar class value to change the color
                var woxs_ttl = $('#' + c + '-title');
                var woxs_ttl_stat = $('#' + c + '-stat');
                woxs_ttl.attr('class', 'woxst-title woxst_' + s);
                woxs_ttl_stat.html(s);
            }

            if (sz > 0) {
                var woxs_body = $('#' + c + '-body');
                var woxs_body_log = $('#' + c + '-log');

                showLoading(woxs_body_log);
                woxs_body.scrollTop(woxs_body[0].scrollHeight);
                // show loading image before update content
                setTimeout(function() { 
                    endLoading(woxs_body_log);

                    if (psz == 0  || sz < psz) {
                        woxs_body_log.html(showlink(data.log));
                    } else if (sz > psz) {
                        woxs_body_log.append(showlink(data.log.substr(psz)));
                    }
                    woxs_body.scrollTop(woxs_body[0].scrollHeight);
                    logsizes[c] = sz;
                }, 500);
            }
          }); // end of each

        }; // end of messaged
    
        var start = function() {
            socket = new io.Socket();
            socket.connect();
            socket.on('connect', connected);
            socket.on('disconnect', disconnected);
            socket.on('message', messaged);
        };
    
        start();
    } // end of magic()

    $(document).ready(function() {

{% include 'topnav-imd.js' %}

        // initialize global variables 
        $('.woxst-box').each(function() {
            var id = $(this).attr('id');
            // title status span of wox status track box
            var woxs_ttl_stat = $('#' + id + '-stat');
            // body of wox status track box 
            var woxs_body_log = $('#' + id + '-log');
            var s = woxs_ttl_stat.html();
            var sz = woxs_body_log.html().length;
            woxs_body_log.html(showlink(woxs_body_log.html()));
            // check both install and test status here
            switch (s) {
                case 'ready':
                case 'finished':
                case 'terminated':
                case 'timeout':
                case 'cancelled':
                    break;
                // the tracking might be continued when
                // the 'error' gets fixed
                case 'error':
                case 'install':
                case 'update':
                case 'running':
                case 'scheduled':
                case 'started':
                    firstsync_flag = true;
                    logstatus[id] = s;
                    logsizes[id] = sz;
                    break;
            }

        }); // end of each

        magic();
    }); // end of ready()

  </script>

</head>

<body class="defect-opensolaris-org-bz">
{% include 'topnav.html' %}
<div>
  <table id="tabtitles" border="0" cellpadding="0" cellspacing="0">
  <tbody><tr>
    <td id="title">
    <p><font color="#FFFFFF">&nbsp;Status &raquo; {{dj_title}}</font></p>
    </td></tr>
  </tbody></table>
</div>

<div id="bugzilla-body" style="min-height: 450px;">
<table><tr><td>
{% for st in dj_statustracks %}
  <div id="{{st.id}}" class="woxst-box">
  <div id="{{st.id}}-title" class="woxst-title woxst_{{st.status}}">
    <b>{{st.title}}<span id="{{st.id}}-stat">{{st.status}}</span></b>
    <div>
      <span class="seperator">[</span>
      <a href="{{st.osurl}}" target="_blank">sys</a>
    {% if st.vncurl %}  
      <span class="seperator">|</span>
      <a href="{{st.vncurl}}" target="_blank">vnc</a>
    {% endif %}  
    {% if st.cslurl %}  
      <span class="seperator">|</span>
      <a href="{{st.cslurl}}" target="_blank">con</a>
    {% endif %}  
      <span class="seperator">]</span>
    </div>
  </div>
  <div id="{{st.id}}-body" class="woxst-body">
  <pre id="{{st.id}}-log">{{st.log}}</pre><span class="field-indic"></span>
  </div>
  </div>
{% endfor %}

</td></tr></table>

</div>
<!-- end of div bugzilla-body -->


{% include 'footer.html' %}
